import React, { useRef, useEffect, useState, useLayoutEffect } from "react";
import { Link } from "react-router-dom";
import useWindowSize from "@/hooks/useWindowSize";
import Profile from "@/media/Navbar/profile.png";
import Increase from "@/media/Navbar/increase.png";
import Reduce from "@/media/Navbar/reduce.png";
import Close from "@/media/Navbar/close.png";
import "./index.css";
import { loginFromStorage } from "@/utils/request";
import { invokeAPi, invokeAsyncAPi } from "@/xz-fn.js";
import { AUTH_USER, AUTH_ONLINE_TOKEN } from "@/utils/constants";
export default function Sidebar() {
  const isLogin = loginFromStorage();
  const refNav = useRef(null);
  const { width } = useWindowSize();
  const [userInfo, setUserInfo] = useState([]);
  const close = () => {
    invokeAPi("xz_close", {
      Url: location.href,
    });
  };

  const reduce = () => {
    invokeAPi("xz_minmized");
  };

  const increase = () => {
    invokeAsyncAPi("xz_isMaxmized").then((res) => {
      res ? invokeAPi("xz_restoreWnd") : invokeAPi("xz_maxmized");
    });
  };

  const handleLogin = () => {
    invokeAPi("xz_ShowUserCenter");
  };

  useLayoutEffect(() => {
    if (refNav.current) {
      let size = refNav.current?.getBoundingClientRect();
      setTimeout(() => {
        invokeAPi("xz_SetTitleMenuRect", [
          {
            x: parseInt(size.x) - 20,
            y: parseInt(size.y) - 10,
            nx: parseInt(size.width) + 20,
            ny: parseInt(size.height) + 10,
          },
          {
            x: 200,
            y: 20,
            nx: 30,
            ny: 40,
          },
          {
            x: 0,
            y: 20,
            nx: 30,
            ny: 40,
          },
        ]);
      }, 100);
    }
  }, [width, userInfo]);
  useEffect(() => {
    invokeAsyncAPi("xz_get_UserInfo").then((res) => {
      if (res) {
        localStorage.setItem(AUTH_USER, JSON.stringify(res));
        localStorage.setItem(AUTH_ONLINE_TOKEN, res?.user_token);
      }
      setUserInfo(res);
    });
  }, []);
  return (
    <>
      <div className="transition-all duration-500">
        <div className="flex shrink-0 w-full items-center justify-end p-[8px] pr-[20px] bar-wrap">
          <div className="flex items-center" ref={refNav}>
            <div
              className="flex items-center cursor-pointer"
              onClick={handleLogin}
            >
              <img
                src={userInfo?.user_head ? userInfo?.user_head : Profile}
                alt="Profile"
                className={`rounded h-[32px] object-contain transition-opacity duration-500`}
              />
              <span className="user-text text-14 font-semibold ml-[8px]">
                {userInfo?.user_name ? userInfo?.user_name : "admin"}
              </span>

              {!isLogin && (
                <div className="flex items-center">
                  <span className="register text-14 font-semibold ml-[8px]">
                    注册送即AI能量
                  </span>
                  <div className="login py-[4px] px-[16px] rounded-[20px] text-13 font-semibold ml-[8px]">
                    登录
                  </div>
                </div>
              )}
            </div>
            {/* <span className="user-text text-sm font-semibold">未登录</span> */}
            {/* <div className="upgrade-member rounded-[20px] py-[3px] px-[16px] text-13 font-semibold ml-[8px]">
              升级会员
            </div> */}
            <div className="ml-[24px] flex items-center">
              <Link
                onClick={(e) => {
                  e.preventDefault();
                  reduce();
                }}
              >
                <img
                  src={Reduce}
                  alt="Reduce"
                  className={`rounded h-[32px] object-contain transition-opacity duration-500`}
                />
              </Link>

              <Link
                onClick={(e) => {
                  e.preventDefault();
                  increase();
                }}
              >
                <img
                  src={Increase}
                  alt="Increase"
                  className={`rounded h-[32px] object-contain transition-opacity duration-500 mx-[16px]`}
                />
              </Link>

              <Link
                onClick={(e) => {
                  e.preventDefault();
                  close();
                }}
              >
                <img
                  src={Close}
                  alt="Close"
                  className={`rounded h-[32px] object-contain transition-opacity duration-500`}
                />
              </Link>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}
